<template>
  <div class="contract-management">
    <!-- 操作栏：添加按钮 + 搜索 -->
    <div class="operation-bar">
      <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加合同</el-button>
      <div class="search-group" style="margin-left: auto;">
        <el-input placeholder="请输入姓名/车牌号搜索" style="width: 240px;" />
        <el-button type="primary" icon="el-icon-search"></el-button>
        <el-button type="primary" icon="el-icon-filter"></el-button>
      </div>
    </div>

    <!-- 合同表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-bottom: 20px;">
      <el-table-column prop="vehicleLicense" label="车辆号码" width="100px" />
      <el-table-column prop="communityName" label="所属小区" />
      <el-table-column prop="parkingSpaceCode" label="车位号" />
      <el-table-column prop="leaseName" label="租赁方" />
      <el-table-column prop="tenantName" label="联系人" />
      <el-table-column prop="tenantPhone" label="联系电话" />
      <el-table-column prop="startDate" label="开始时间" />
      <el-table-column prop="stopDate" label="到期时间" />
      <el-table-column prop="leaseStatus" label="合同状态" width="100px" />
      <el-table-column prop="vehicleDisplacement" label="车辆排量" width="100px" />
      <el-table-column prop="contractRent" label="收费金额" width="100px" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleDetail(scope.row)">详情</el-button>
          <el-button type="danger" size="small" plain @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrap">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15]" :page-size=this.pageSize :total=this.tatal
        layout="prev, pager, next, ->, jumper, ->, sizes, total" />
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: 'ContractManagement',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tatal: 0,
      tableData: []
    }
  },
  created() {
    this.getParkingLease();
  },
  methods: {
    //获取车位合同
    getParkingLease() {
      request.post('/parkingLease/getParkingLeaseList', {
        page: this.currentPage,
        size: this.pageSize
      }).then(res => {
        this.tableData = res.data.records;
        this.tatal = res.data.total;
      }).catch(err => {
        console.log(err)
      })
    },
    // 上一页
    handlePrev() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.getParkingLease();
      }
    },
    // 下一页
    handleNext() {
      if (this.currentPage < Math.ceil(this.tatal / this.pageSize)) {
        this.currentPage++;
        this.getParkingLease();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getParkingLease();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getParkingLease();
    },
    handleAdd() {
      this.$router.push({
        name: 'AddParkingLease'
      })
    },
    handleDetail(row) {
      console.log(row.parkingLeaseId);
      this.$router.push({
        name: 'ParkingLeaseDetail',
        query: {
          parkingLeaseId: row.parkingLeaseId
        }
      })
    },
    handleDelete(row) {
      console.log(row.parkingLeaseId);

      request.delete('/parkingLease/' + row.parkingLeaseId).then(res => {
        this.getParkingLease();
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>


<style scoped>
.contract-management {
  padding: 20px;
}

.operation-bar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.search-group {
  display: flex;
  align-items: center;
}

.search-group .el-input {
  margin-right: 8px;
}

.pagination-wrap {
  display: flex;
  justify-content: flex-end;
}
</style>